<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <span>招聘网站</span>
      <div class="search-menu">
        <!-- 搜索框 -->
        <el-autocomplete
          size="large"
          placeholder="搜索岗位"
        ></el-autocomplete>
        <el-divider direction="vertical"></el-divider>
        <!-- 顶部菜单栏 -->
        <el-menu class="main-menu" mode="horizontal" text-color="#A0CFFF" active-text-color="#1989FA">
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2">求职</el-menu-item>
          <el-menu-item index="3">公司</el-menu-item>
          <el-menu-item index="4">课程</el-menu-item>
          <el-menu-item index="5">APP</el-menu-item>
        </el-menu>
        <el-divider direction="vertical"></el-divider>
        <!-- 个人中心下拉框 -->
        <el-dropdown class="per-dropdown" trigger="hover">
          <span class="el-dropdown-link">
            imquanquan<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item class="dropdown-item">个人资料</el-dropdown-item>
            <el-dropdown-item class="dropdown-item">我的简历</el-dropdown-item>
            <el-dropdown-item class="dropdown-item">我的收藏</el-dropdown-item>
            <el-dropdown-item class="dropdown-item">我的投递</el-dropdown-item>
            <el-dropdown-item class="dropdown-item">面试邀请</el-dropdown-item>
            <el-dropdown-item class="dropdown-item">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

    </el-header>
    <!-- 主体区域 -->
    <el-container class="company" direction="vertical">
      <!--上 公司信息-->
      <el-container class="company_detail" direction="vertical">
        <el-container class="company_base_imformation">
          <!--左 企业logo-->
          <div class="company_logo">
            <img :src="require('../assets/scau.jpeg')" alt="">
          </div>
          <!--中 企业主要信息-->
         <!-- {{company}}-->
          <el-container class="company_main_imformation" direction="vertical">
            <div class="c_top">
              {{company.companyname}}
            </div>

            <div class="c_bot">
              {{ company.financing }}/{{ company.scale }}
            </div>
            <div class="company_address">
              {{ company.city }}{{ company.county }}
            </div>
          </el-container>
<!--          <el-container class="c_jobs_list">
            <a href="#job_list">工作列表</a>

          </el-container>-->

        </el-container>
        <el-divider></el-divider>
        <el-container class="company_description">
          注册时间：{{ company.registration_time }}
          <br>
          <br>
          上班时间：{{company.start_work_time}}-{{company.off_work_time}}/ {{company.work_days}}
          <br>
          <br>
          联系电话：{{company.telephone}}
          <br>
          <br>
          详细描述：{{company.description}}

        </el-container>

      </el-container>
      <el-divider></el-divider>
      <el-container class="company_address">
        公司地址：{{ company.address }}
      </el-container>
      <el-divider></el-divider>

      <el-container class="jobs" direction="vertical">
       <!-- <span name="job_list">所有职位</span>-->
        <div class="buttons">
          <el-button @click="resetDateFilter">清除日期过滤器</el-button>
          <el-button @click="clearFilter">清除所有过滤器</el-button>
        </div>
        <el-table
            ref="filterTable"
            :data="tableData"
            style="width: 100%">
          <el-table-column
              prop="deliver_date"
              label="发布日期"
              sortable
              width="180"
              column-key="deliver_date"
              :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
              :filter-method="filterHandler"
          >
          </el-table-column>

          <el-table-column
              prop="job_name"
              label="职位名称"
              width="180">
            <template slot-scope="scope">
           <!--   {{scope.row}}-->
              <el-link :href="'#/jobs/' + scope.row.id">{{ scope.row.job_name}}</el-link>
            </template>

          </el-table-column>



          <el-table-column
              prop="experience"
              label="经验|学历"
              :formatter="formatter_experience">
          </el-table-column>
          <el-table-column
              prop="salary"
              label="薪资"
              :formatter="formatter">
          </el-table-column>
          <el-table-column
              prop="tag"
              label="标签"
              width="100"
              :filters="[{ text: '兼职', value: '兼职' }, { text: '社招全职', value: '社招全职' }]"
              :filter-method="filterTag"
              :formatter="formatter_tag"
              filter-placement="bottom-end">
            <!--<template slot-scope="scope">
              <el-tag
                  :type="scope.row.tag === '家' ? 'primary' : 'success'"
                  disable-transitions>{{scope.row.tag}}</el-tag>
            </template>-->
          </el-table-column>
        </el-table>
        <!--
        分页
        <div class="block">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400">
          </el-pagination>
        </div>-->
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      tableData: null,
      company:null
    }
  },
  created () {
    this.list_job(),
        this.get_company()
  },
  methods: {
    async list_job() {
      this.$http.get('api/job?company_id='+this.$route.params.id, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': window.sessionStorage.getItem('token')
        }
      })
          .then(response => {
                this.tableData = response.data;
                console.log(response.data)
              }
          )
    },
    async get_company() {
      this.$http.get('api/company/' + this.$route.params.id, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': window.sessionStorage.getItem('token')
        }
      })
          .then(response => {
                this.company = response.data;
                console.log(this.company)
              }
          )
    },
    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('deliver_date');
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter_experience(row, column) {
      return row.experience+"|"+row.education;
    },
    formatter_tag(row,column){
      return row.type;
    },

    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    }
  }
}
</script>

<style lang="less" scoped>

.el-header {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
  border-bottom: 1px solid #ebebeb;
  >span {
    color: #409EFF;
    margin-left: 15px;
  }
}

.search-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 70%;
}

.el-autocomplete {
  width: 40%;
}

.main-menu .el-menu-item {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
}

.el-dropdown-link {
  color: #409EFF;
  font-size: 18px;
}

.el-icon-arrow-down {
  color: #409EFF;
  font-size: 16px;
}

.dropdown-item {
  width: 100px;
  text-align: center;
  letter-spacing: 1px;
  color: #A0CFFF;
}

.home-container {
  height: 100%;
}
.company_base_imformation{
  //background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
}

.company_logo img {
  width: 88px;
  aspect-ratio: auto 88 / 88;
  height: 88px;
}
.company_logo {
  width: 88px;
  aspect-ratio: auto 88 / 88;
  height: 88px;
}
.company_detail {
  background-color: #f2f5f4;
  //padding: px 0 11px;
  display: flex;

}
.c_top {
  float: left;
  max-width: 340px;
  //height: 30px;
  line-height: 30px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 10px 0;
}
.c_bot{
  margin: 10px 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}
.el-divider{
  margin: 0 0;
}
.company{
  margin: 0 20%;
}
.company_main_imformation{
  margin: 0 10px;
  width: 100px;
  //background-color: #333333;
}

</style>
